import { lazy } from 'react'
import { Navigate, RouteObject } from 'react-router-dom'
import Layout from '@/page/layout/layout'

const ErrorPage = lazy(() => import('@/page/error-page/error-page'))
const About = lazy(() => import('@/page/about/about'))
const Login = lazy(() => import('@/page/login/login'))
const IndexPage = lazy(() => import('@/page/index-page/index-page'))

const basePath = '/react-app'
const routes: RouteObject[] = [{
    path: basePath,
    // element: <Navigate to={`${basePath}/index`} />
    children: [{
        path: '',
        element: <Navigate to={`${basePath}/index`} />
    }, {
        id: 'index',
        path: 'index',
        element: <IndexPage />,
        children: [{
            id: 'about',
            path: 'about',
            element: <About />,
        }]
    }, {
        id: 'errorPage',
        path: 'error-page',
        element: <ErrorPage />,
    }, {
        id: 'login',
        path: 'login',
        element: <Login />,
    }]
}]

export default routes
